<template>
  <div class="app-container home">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item
        v-for="(item, index) in newsItems"
        :key="index"
      >
        <div class="news-item">
          <img :src="item.imageUrl" alt="News Image" style="width: 100%; height: 100%;">
          <div class="text-overlay">
            <h2 class="medium">{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px" >
        <h2 align="center" style="font-size: 50px">"侠帮帮"募捐管理系统</h2>
        <p style="font-size: 20px">
          创办这个募捐系统，其初衷源自于对社会公益事业的深切关怀与责任担当。在当今社会，无论是自然灾害的突发、贫困地区的教育援助，还是重大疾病的紧急救助，都存在着大量需要帮助的人群。然而，传统慈善捐赠方式往往面临着信息不对称、透明度不高、捐赠流程繁琐等问题，这些障碍限制了爱心人士的参与热情，也影响了慈善资源的有效分配。

          因此，我们创办此募捐系统，旨在构建一个高效、透明、可信的公益桥梁，连接渴望帮助的心与亟需支援的手。
        </p>
        <br>
        <br>
        <br>
        <div>
          <el-row :gutter="20">
            <el-col :span="12" class="custom-col" >
              <div>
                <el-statistic title="本年捐赠总额" class="custom-statistic">
                  <template slot="formatter">
                    221,687.97
                  </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="12" class="custom-col">
              <div>
                <el-statistic title="累计历史捐赠总额" class="custom-statistic">
                  <template slot="formatter">
                    1,701,456.81
                  </template>
                </el-statistic>
              </div>
            </el-col>

          </el-row>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <el-steps :active="3">
          <el-step title="心地善良" description="如果你是一个有爱心、品德高尚的人"></el-step>
          <el-step title="独具慧眼" description="碰巧你遇到了我们XBB"></el-step>
          <el-step title="真诚待人" description="有缘人，那就加入我们吧！！！"></el-step>
        </el-steps>

      </el-col>
      <el-col sm="24" :lg="12":span="4" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/logo/logo1.jpg" class="image">
          <div style="padding: 14px;">
            <span>欢迎加入我们"侠帮帮"</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="text" @click="open">加入</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">
          中国儿童少年基金会
          <br />
          <el-link
            href="https://www.cctf.org.cn/"
            type="primary"
            target="_blank"
            >https://www.cctf.org.cn/</el-link
          >
          <br />
          中国社会福利基金会
          <br />
          <el-link
            href="https://www.cswef.org/cswef/welfarepro/detail/id/99.html"
            type="primary"
            target="_blank"
            >https://www.cswef.org/cswef/welfarepro/detail/id/99.html</el-link
          >
          <br />
          北京韩红爱心慈善基金会
          <br />
          <el-link
            href="https://www.hhax.org/"
            type="primary"
            target="_blank"
          >https://www.hhax.org/</el-link
          >
          <br />
          <h1 align="center">共同创造美好的明天，人人都有爱，人人奉献爱</h1>
        </blockquote>

        <hr />
      </el-col>
    </el-row>


    <el-row :gutter="20">
      <el-col :span="12">
      <el-dropdown>
    <span class="el-dropdown-link">
      现有爱心成员<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>崔**</el-dropdown-item>
          <el-dropdown-item>李**</el-dropdown-item>
          <el-dropdown-item>郭**</el-dropdown-item>
          <el-dropdown-item>康**</el-dropdown-item>
          <el-dropdown-item>刘**</el-dropdown-item>
          <el-dropdown-item>刘**</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
      <el-col :span="12">
    <el-divider direction="vertical"></el-divider>
    <el-button type="text" @click="table = true">线下帮助点!!!</el-button>
    <el-drawer
      title="线下帮助点"
      :visible.sync="table"
      direction="rtl"
      size="50%">
      <el-table :data="gridData">
        <el-table-column property="date" label="工作时间" width="120"></el-table-column>
        <el-table-column property="name" label="负责人" width="100"></el-table-column>
        <el-table-column property="phone" label="联系电话" width="150"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>

      </el-table>
    </el-drawer>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      newsItems: [
        {
          title: '全力以赴，防汛抗宅',
          description: '广东地区受降雨的影响较大。6月13日以来，粤北、珠三角北部和沿海市县、汕尾先后出现大到暴雨。其中，清远佛冈、梅州平远和蕉岭、汕尾、海丰先后出现特大暴雨。多处发生山洪、山体滑坡。',
          imageUrl: require('@/assets/images_1/1.jpg')
        },
        {
          title: '來自星星的孩子',
          description: '全球自闭症患者已达8000万人，超过全世界癌症、艾滋病患者的总和。中国自闭症患者数量近1000万人，其中200多万人为儿童。全世界平均每68名儿童就有一名患自闭症障碍，且逐年上涨。',
          imageUrl: require('@/assets/images_1/2.jpg')
        },
        {
          title: '为更多山里孩子点亮“玫瑰般的梦想',
          description: '2024年，全国农村留守儿童数量仍然高达数百万，这些孩子主要分布在经济相对落后的地区。他们的生活条件艰苦，往往居住在简陋的房屋里，饮食不规律，营养不均衡。',
          imageUrl: require('@/assets/images_1/3.jpg')
        },{
          title: '地震救援，刻不容緩',
          description: '来自兰州、临夏州广河县的牛肉面店携带原材料和锅碗用具，现场开火，免费向避险群众提供牛肉面。35岁的大河村村民马光英过去曾经从事餐饮行业，得知有牛肉面馆免费向群众提供牛肉面，他和几个村民自发帮忙。',
          imageUrl: require('@/assets/images_1/4.png')
        },
      ],
      table: false,
      dialog: false,
      loading: false,
      gridData: [{
        date: '9:00---18:00',
        name: '刘经理',
        phone:'13455556666',
        address: '辽宁省大连市甘井子区革镇堡街道******号'
      }, {
        date: '9:00---18:00',
        name: '郭经理',
        phone:'13477778888',
        address: '北京市朝阳区******号'
      }, {
        date: '9:00---18:00',
        name: '崔经理',
        phone:'13422224444',
        address: '上海市普陀区金沙江路******弄'
      }, {
        date: '9:00---18:00',
        name: '刘经理',
        phone:'13422124444',
        address: '德州市宁静县******路'
      }, {
        date: '9:00---18:00',
        name: '李经理',
        phone:'13477779999',
        address: '沈阳市沈北区******号'
      },{
        date: '9:00---18:00',
        name: '康经理',
        phone:'13477779999',
        address: '北京市海淀区******号'
      }],
      // 版本号
      version: "3.8.8",
      currentDate: new Date(),
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    open() {
      this.$alert('投递！' +
        '邮箱：xbb@outlook.com', '"侠帮帮"欢迎您的加入！', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${ action }`
          });
        }
      });
    },

  }
};
</script>

<style scoped lang="scss">
.custom-statistic {
  /* 设置字体大小 */
  font-size: 36px; /* 或者你需要的任何大小 */
  /* 如果需要，还可以添加其他样式，如文本对齐等 */
  text-align: center;
  border: 2px solid #42b983; /* 绿色边框 */
  border-radius: 5px; /* 可选的圆角边框 */
  padding: 10px; /* 内部填充，使内容不会紧贴边框 */
  align-content: center;
}

/* 如果你想要更精确地控制内部数字的样式，你可能需要添加更具体的选择器 */
.custom-statistic .formatter {
  /* 注意：这里的.formatter是假设的，具体取决于你的组件如何实现formatter插槽 */
  font-size: inherit; /* 或者直接设置字体大小 */
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;

}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.news-item img {
  width: 100%;
  height: auto; /* 或者设置为特定高度，但注意这可能会改变图片比例 */
  display: block; /* 移除图片下方的默认间隙 */
}

.text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  color: white;
  padding: 10px;
  /* 可能还需要添加一些样式来调整文本的位置和样式 */
}

.medium {
  /* 自定义的标题样式 */
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>

